<template>
  <div>
    <div class="city-form">
      <input type="text"
             class="city-input"
             placeholder="输入学校、商务楼、地址"
             v-model="address">
      <button @click="getSearchlist">提交</button>
    </div>
    <!-- 搜索出来的地址 -->
    <div class="search-result"
         v-if="search">
      <ul>
        <li v-for="(item,index) in searchlist"
            :key="index"
            @click="searchSend(item)">
          <div class="searchlist-title">
            {{item.name}}
          </div>
          <div class="searchlist-address">
            {{item.address}}
          </div>
        </li>
      </ul>
    </div>
    <!-- 搜索历史 -->
    <div class="sreach-history-title"
         v-if="!search">搜索历史</div>
    <HistoryS :value='serachclick'
              :search='search'></HistoryS>
  </div>
</template>

<script>
import HistoryS from '../components/compoents_A/serachHistory_A'
export default {
  components: {
    HistoryS,
  },
  //获取地址显示在头部
  created () {
      this.$axios.get('https://elm.cangdu.org/v1/cities/'+this.$route.params.id).then(res=>{
        this.$store.state.title = res.name;
      }).catch(err=>{
        console.log(err);
      })
  },
  data () {
    return {
      search: false,
      searchlist: [],
      address: '',
      serachclick: ''
    }
  },
  methods: {
    getSearchlist () {
      this.$axios.get('https://elm.cangdu.org/v1/pois', {
        params: {
          city_id: this.$route.params.id,
          keyword: this.address,
          type: 'search',
        }
      }).then(res => {
        this.searchlist = res;
        this.search = true;
      }).catch(err => {
        console.log(err)
      })
    },
    searchSend (item) {
      this.serachclick = item;
      //经纬度
      //console.log(item.latitude,item.longitude);
      localStorage.setItem("tra", JSON.stringify(item))
     this.$router.push({name:'First_B',params:{id:item}});
    }
  },
}
</script>

<style lang="less">
.city-form {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  background-color: #fff;
  align-items: center;
  height: 100px;
  margin-top: 10px;
  border-bottom: 2px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
  input {
    width: 337.5px;
    box-sizing: border-box;
    height: 32.81px;
    padding: 0 7px;
    color: #333;
    outline: none;
    border: 1px solid #e4e4e4;
  }
  button {
    background-color: #3190e8;
    width: 337.5px;
    box-sizing: border-box;
    height: 32.81px;
    outline: none;
    border-radius: 5px;
    border: none;
    color: white;
  }
}
.search-result {
  ul {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    li {
      height: 73.33px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      box-sizing: border-box;
      padding: 0 10px;
      border-bottom: 1px solid #e3e3e3;
      .searchlist-title {
        color: #333;
        font-size: 15px;
      }
      .searchlist-address {
        color: #999;
        font-size: 12px;
      }
    }
  }
}

.sreach-history-title {
  border-bottom: 2px solid #e4e4e4;
  font-size: 12px;
  padding: 0 20px;
}
</style>